<template>
  <h2>Ref定义数据</h2>
  <ol>
    <li>ref() 方法创建响应式的数据，可以装载任何值类型</li>
    <li>ref() 从参数中获取到值，将其包装为一个带 .value 属性的对象</li>
    <li>ref() 当值为对象类型时，会用 reactive() 自动转换它的 .value。</li>
    <li>
      ref() 使我们能创造一种对任何值的 "引用" 并能够不丢失响应性地随意传递
    </li>
    <li>
      不得不对 ref 使用 .value 是一个受限于 JavaScript
      语言限制的缺点。不过在编译期间，自动在合适的位置上添加上 .value
      可以改进开发体验。Vue 提供了一个语法糖
    </li>
  </ol>
  <div>
    ref定义值：<span>{{ count }}</span>
  </div>
  <div>
    $ref定义值：<span>{{ num }}</span>
  </div>
  <button @click="changeNum">change</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";

// ref() 定义响应式变量
const count = ref(0);

// $ref 定义数据
let num = $ref(1);

const changeNum = () => {
  count.value++;
  num++;
};
</script>
<style lang="scss" scoped></style>
